import React, { useState } from 'react';
import { Table, Modal, message } from 'antd';
import './index.scss'
const BookForm = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedBook, setSelectedBook] = useState(null);

  const handleMore = (record) => {
    setSelectedBook(record);
    setIsModalVisible(true);
  };

  const calculateLoanDuration = (borrowDate) => {
    const borrow = new Date(borrowDate);
    const now = new Date();
    const diffTime = Math.abs(now - borrow);
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  };

  const rowClassName = (record) => {
    const duration = calculateLoanDuration(record.borrowDate);
    return duration > 14 ? 'highlight-row-bookform' : '';
  };

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '书名', dataIndex: 'bookName', key: 'bookName' },
    { title: '借出时间', dataIndex: 'borrowDate', key: 'borrowDate' },
    { title: '借出时长（天）', key: 'duration', render: (_, record) => calculateLoanDuration(record.borrowDate) },
    { title: '剩余数量', dataIndex: 'remainingCount', key: 'remainingCount' },
    { 
      title: '更多', 
      key: 'more', 
      render: (_, record) => (
        <a style={{ color: 'blue' }} onClick={() => handleMore(record)}>
          更多
        </a>
      ),
    },
  ];

  const data = Array.from({ length: 100 }, (_, index) => {
    const borrowDate = new Date();
    borrowDate.setDate(borrowDate.getDate() - Math.floor(Math.random() * 30));
    return {
      key: index,
      id: index + 1,
      bookName: `书籍${index + 1}`,
      borrowDate: borrowDate.toISOString().split('T')[0],
      remainingCount: Math.floor(Math.random() * 100),
    };
  });

  return (
    <div>
     
      <Table 
        rowClassName={rowClassName}
        columns={columns} 
        dataSource={data} 
        pagination={{ pageSize: 20 }} 
      />
      <Modal
        title="书籍信息"
        visible={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        footer={null}
      >
        {selectedBook && (
          <div>
            <p>ID: {selectedBook.id}</p>
            <p>书名: {selectedBook.bookName}</p>
            <p>借出时间: {selectedBook.borrowDate}</p>
            <p>剩余数量: {selectedBook.remainingCount}</p>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default BookForm;